<script setup lang="ts">
import { useQRCode } from '@vueuse/integrations/useQRCode';
import { ref } from 'vue';
import Title from '@/components/common/login/auth-title.vue';

defineOptions({
  name: 'QrCodeLogin'
});

interface Emit {
  (event: 'changeModule', module: UnionKey.LoginModule): void;
}
const emit = defineEmits<Emit>();

const text: any = ref('https://www.baidu.com/');
const qrcode = useQRCode(text) as unknown as string;
</script>

<template>
  <div>
    <Title title="欢迎回来 📱">
      <template #desc>
        <span class="text-muted-foreground">
          <slot name="subTitle">请用手机扫描二维码登录</slot>
        </span>
      </template>
    </Title>

    <div class="mt-6 flex-col-center">
      <img :src="qrcode" alt="qrcode" class="w-1/2" />
      <p class="mt-4 text-sm text-muted-foreground">
        <slot name="description">扫码后点击 '登录'，即可完成登录</slot>
      </p>
    </div>

    <NButton class="mt-4" block @click="emit('changeModule', 'pwd-login')">返回</NButton>
  </div>
</template>
